/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../mixins/common.less';
@import '../custom.less';
@import './vars.less';

@calendar-view-prefix-cls: ~'@{css-prefix}calendar-view';

.@{calendar-view-prefix-cls} {
  .inject-CalendarView-vars();
  width: 100%;
  height: auto;
  padding-top: var(--tv-CalendarView-padding);
  border: 1px solid var(--tv-CalendarView-date-border-color);
  background-color: var(--tv-CalendarView-bg-color);
  overflow: auto;
  border-bottom: none;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding: 0 var(--tv-CalendarView-padding);
  }

  &__header div:first-child {
    flex-grow: 1;
  }

  &__picker {
    flex-shrink: 0;
    margin-right: var(--tv-CalendarView-picker-right-bottom);
  }

  &__radio {
    flex-shrink: 0;

    .tiny-radio-button__inner {
      height: 32px;

      &:hover {
        background-color: var(--tv-CalendarView-radio-icon-bg-hover);
      }

      svg {
        width: var(--tv-CalendarView-radio-font-size);
        height: var(--tv-CalendarView-radio-font-size);
        fill: var(--tv-CalendarView-radio-icon-color);
      }
    }

    .is-active {
      .tiny-radio-button__inner {
        background-color: var(--tv-CalendarView-radio-active-inner-bg-color);
        border: 1px solid var(--tv-CalendarView-radio-active-border-color);

        svg {
          fill: var(--tv-CalendarView-radio-active-icon-color);
        }
      }
    }
  }

  .@{calendar-view-prefix-cls}-month {
    &__header {
      display: flex;
      position: relative;
      justify-content: space-around;
      height: 40px;

      .header-left {
        height: 100%;
        display: flex;
        align-items: center;
        position: absolute;
        left: 32px;
        cursor: pointer;

        > svg {
          fill: var(--tv-CalendarView-header-icon-color);
        }
      }

      .header-main {
        display: flex;
        justify-content: space-around;
        flex: 1;
        height: 100%;

        > li {
          line-height: 40px;

          > span {
            font-size: var(--tv-CalendarView-header-main-font-size);
            color: var(--tv-CalendarView-header-main-text-color);
          }
        }
      }

      .header-right {
        height: 100%;
        display: flex;
        align-items: center;
        position: absolute;
        right: 32px;
        cursor: pointer;

        > svg {
          fill: var(--tv-CalendarView-header-icon-color);
        }
      }
    }

    &__main {
      width: 100%;
      overflow: hidden;
      border-top: 1px solid var(--tv-CalendarView-date-border-color);

      .main-container {
        width: 100%;

        margin-top: var(--tv-CalendarView-main-margin-top);

        > ul {
          width: 100%;
          display: flex;
          justify-content: space-around;
          border-bottom: 1px solid var(--tv-CalendarView-date-border-color);

          > li {
            font-size: var(--tv-CalendarView-main-li-font-size);
            padding: var(--tv-CalendarView-main-li-padding) 0;
            position: relative;
            height: 80px;
            overflow: hidden;
            border-right: 1px solid var(--tv-CalendarView-date-border-color);
            background-color: var(--tv-CalendarView-main-li-bg-color);

            &.is-selected {
              background-color: var(--tv-CalendarView-li-selected-bg-color);
            }

            &.not-selected:hover {
              background-color: var(--tv-CalendarView-bg-color-unselected-hover);
            }

            &.bg-blue {
              background-color: rgba(0, 103, 209, 0.1);
            }

            &.bg-green {
              background-color: rgba(0, 168, 116, 0.1);
            }

            &.bg-red {
              background-color: rgba(235, 23, 31, 0.1);
            }

            &.bg-yellow {
              background-color: rgba(243, 105, 0, 0.1);
            }

            &.bg-purple {
              background-color: rgba(116, 94, 246, 0.1);
            }

            &.bg-cyan {
              background-color: rgba(0, 162, 181, 0.1);
            }

            &.bg-grey {
              background-color: rgba(141, 149, 158, 0.3);
            }
          }
        }

        ul li:last-of-type {
          border-right: none;
        }

        .day-selected {
          position: absolute;
          top: 0;
          right: 0;
          background-color: var(--tv-CalendarView-selected-bg-color-hover);

          > svg {
            width: var(--tv-CalendarView-selected-icon-size);
            height: var(--tv-CalendarView-selected-icon-size);
            fill: var(--tv-CalendarView-selected-icon-color);
            position: relative;
          }
        }

        .date {
          margin-left: var(--tv-CalendarView-date-margin-left);
          color: var(--tv-CalendarView-date-text-color);

          &.is-next-or-last {
            color: var(--tv-CalendarView-date-weaken-text-color);
          }
          &.is-selected {
            color: var(--tv-CalendarView-date-selected-text-color);
          }
          &.is-disabled {
            color: var(--tv-CalendarView-text-color-disabled);
          }
        }

        .day-events {
          overflow-y: auto;
          width: 100%;

          &::-webkit-scrollbar {
            width: 0;
            height: 0;
          }

          .events-container {
            margin-bottom: var(--tv-CalendarView-event-container-margin-bottom);
          }

          .events-start {
            padding: 0 var(--tv-CalendarView-event-start-padding);

            &.multi-day {
              padding-right: 0;
            }
          }

          .events-title {
            width: 100%;
            display: inline-block;
            font-size: var(--tv-CalendarView-event-title-font-size);
            line-height: 17px;
            color: var(--tv-CalendarView-event-title-text-color);
            padding: 0 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &.theme-blue {
              border-left: 2px solid #1890ff;
              background-color: rgba(0, 103, 209, 0.1);
            }

            &.theme-green {
              border-left: 2px solid #00a874;
              background-color: rgba(0, 168, 116, 0.1);
            }

            &.theme-red {
              border-left: 2px solid #eb171f;
              background-color: rgba(235, 23, 31, 0.1);
            }

            &.theme-yellow {
              border-left: 2px solid #f36900;
              background-color: rgba(243, 105, 0, 0.1);
            }

            &.theme-purple {
              border-left: 2px solid #745ef7;
              background-color: rgba(116, 94, 246, 0.1);
            }

            &.theme-cyan {
              border-left: 2px solid #00a2b5;
              background-color: rgba(0, 162, 181, 0.1);
            }

            &.theme-grey {
              border-left: 2px solid #8d959e;
              background-color: rgba(141, 149, 158, 0.3);
            }
          }

          .events-end {
            height: 20px;
            line-height: 20px;

            &.bg-blue {
              background-color: rgba(0, 103, 209, 0.1);
            }

            &.bg-green {
              background-color: rgba(0, 168, 116, 0.1);
            }

            &.bg-red {
              background-color: rgba(235, 23, 31, 0.1);
            }

            &.bg-yellow {
              background-color: rgba(243, 105, 0, 0.1);
            }

            &.bg-purple {
              background-color: rgba(116, 94, 246, 0.1);
            }

            &.bg-cyan {
              background-color: rgba(0, 162, 181, 0.1);
            }

            &.bg-grey {
              background-color: rgba(141, 149, 158, 0.3);
            }
          }
        }
      }
    }
  }

  .@{calendar-view-prefix-cls}-week {
    &__header {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 40px;
    }

    .header-left {
      margin-left: 32px;
      flex-shrink: 0;
      text-align: right;
      cursor: pointer;

      > svg {
        fill: var(--tv-CalendarView-header-icon-color);
      }
    }
    .header-right {
      margin-right: 32px;
      flex-shrink: 0;
      text-align: left;
      cursor: pointer;

      > svg {
        fill: var(--tv-CalendarView-header-icon-color);
      }
    }

    .header-main {
      display: flex;
      justify-content: space-around;
      flex: 1;
      height: 100%;

      > li {
        line-height: 40px;
        cursor: pointer;

        .date {
          position: relative;
          margin-right: 10px;
          font-size: var(--tv-CalendarView-week-date-font-size);
          color: var(--tv-CalendarView-week-date-text-color);

          &.is-today {
            color: var(--tv-CalendarView-week-date-today-text-color);
          }

          &.current {
            color: var(--tv-CalendarView-week-date-today-text-color);
          }
        }

        .mark {
          width: 6px;
          height: 6px;
          position: absolute;
          bottom: -8px;
          left: var(--tv-CalendarView-mark-left);
          border-radius: var(--tv-CalendarView-mark-border-radius);

          &.is-two-digit {
            left: var(--tv-CalendarView-mark-digit-left);
          }

          &.mark-blue {
            background-color: #1890ff;
          }

          &.mark-green {
            background-color: #00a874;
          }

          &.mark-red {
            background-color: var(--tv-CalendarView-mark-bg-color);
          }

          &.mark-yellow {
            background-color: #f36900;
          }

          &.mark-purple {
            background-color: #745ef7;
          }

          &.mark-cyan {
            background-color: #00a2b5;
          }

          &.mark-grey {
            background-color: #8d959e;
          }
        }

        .week-day {
          font-size: var(--tv-CalendarView-week-day-font-size);
          color: #8d959e;

          &.is-today {
            color: var(--tv-CalendarView-week-date-today-text-color);
          }

          &.current {
            color: var(--tv-CalendarView-week-date-today-text-color);
          }
        }
      }
    }
  }

  .@{calendar-view-prefix-cls}-week__timeline {
    width: 100%;
    height: 448px;
    display: flex;
    overflow-y: auto;
    margin-top: var(--tv-CalendarView-timeline-margin-top);

    .day-times {
      width: 36px;
      margin-left: 21px;

      ul > li {
        height: var(--tv-CalendarView-events-list-height);
        padding: var(--tv-CalendarView-events-list-padding);
        text-align: left;
        border-bottom-width: var(--tv-CalendarView-timeline-li-border-width);
        border-bottom-style: solid;
        border-bottom-color: #fff;

        &.is-odd-num {
          border-bottom-color: #f5f6f8;
        }

        span {
          font-size: var(--tv-CalendarView-timeline-span-font-size);
          color: var(--tv-CalendarView-timeline-span-text-color);
        }
      }
    }

    .day-events {
      flex: 1;

      > ul {
        width: 100%;
        display: flex;
        justify-content: space-around;

        > li {
          position: relative;

          &.is-weekends {
            background-color: rgba(245, 246, 248, 0.5);
          }
        }
      }

      .events-list {
        > li {
          position: relative;
          height: var(--tv-CalendarView-events-list-height);
          padding: var(--tv-CalendarView-events-list-padding);
          list-style-type: none;
          border-bottom-width: 1px;
          border-bottom-style: solid;
          border-bottom-color: #f5f6f8;

          &.is-even-num {
            border-bottom-style: dashed;
          }

          &.is-scroll-list{
            overflow-y: auto;
            overflow-x: hidden;

            &.is-scroll-list::-webkit-scrollbar {
              width: 0;
              height: 0;
            }
          }
        }

        .events-item {
          font-size: var(--tv-CalendarView-events-item-font-size);
          font-weight: var(--tv-CalendarView-events-item-font-weight);
          width: 92%;
          display: flex;
          align-items: center;
          padding: 0 6px;
          top: 0;
          left: 0;
          z-index: 10;
          line-height: 1.5;
          border-radius: 2px;
          color: var(--tv-CalendarView-events-item-text-color);
          margin-bottom: 1px;

          &.theme-blue {
            border-left: 2px solid #1890ff;
            background-color: rgba(0, 103, 209, 0.1);
          }

          &.theme-green {
            border-left: 2px solid #00a874;
            background-color: rgba(0, 168, 116, 0.1);
          }

          &.theme-red {
            border-left: 2px solid #eb171f;
            background-color: rgba(235, 23, 31, 0.1);
          }

          &.theme-yellow {
            border-left: 2px solid #f36900;
            background-color: rgba(243, 105, 0, 0.1);
          }

          &.theme-purple {
            border-left: 2px solid #745ef7;
            background-color: rgba(116, 94, 246, 0.1);
          }

          &.theme-cyan {
            border-left: 2px solid #00a2b5;
            background-color: rgba(0, 162, 181, 0.1);
          }

          &.theme-grey {
            border-left: 2px solid #8d959e;
            background-color: rgba(141, 149, 158, 0.3);
          }
        }
      }
    }
  }

  .@{calendar-view-prefix-cls}-week__schedule {
    width: 100%;
    padding: 0 24px 16px 24px;
    overflow-y: auto;
    height: 448px;

    > ul {
      display: flex;
      width: 100%;

      > li {
        height: 100%;
        padding: var(--tv-CalendarView-week-li-padding-y) var(--tv-CalendarView-week-li-padding-x);

        .title {
          font-size: var(--tv-CalendarView-week-title-font-size);
          font-weight: var(--tv-CalendarView-week-title-font-weight);
          line-height: 20px;
        }
        .content {
          font-size: var(--tv-CalendarView-week-content-font-size);
          font-weight: var(--tv-CalendarView-week-content-font-weight);
          line-height: 22px;
        }
      }
    }

    .day-events {
      font-size: var(--tv-CalendarView-week-day-font-size);
      padding: 6px 0;
      height: auto;
      border: 1px solid #e8ebef;
      border-radius: var(--tv-CalendarView-week-day-border-radius);
      margin-bottom: var(--tv-CalendarView-week-day-margin-bottom);
      box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);

      .title {
        padding: 0 6px;
        margin-bottom: 6px;
        border-left-width: 2px;
        border-left-color: #1890ff;
      }

      .date {
        margin-bottom: 6px;
        padding: 0 var(--tv-CalendarView-week-date-padding-x);
        color: var(--tv-CalendarView-week-date-text-color);
      }

      .content {
        padding: 0 var(--tv-CalendarView-week-content-padding-x);
        color: #8d959e;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
      }
    }

    .new-schedule {
      height: 32px;
      text-align: center;
      line-height: 32px;
      width: 100%;
      margin-top: var(--tv-CalendarView-week-schedule-margin-top);
      border: 1px solid #e8ebef;
      border-radius: var(--tv-CalendarView-week-schedule-border-radius);
      cursor: pointer;

      > svg {
        width: var(--tv-CalendarView-week-schedule-icon-size);
        height: var(--tv-CalendarView-week-schedule-icon-size);
        vertical-align: sub;
        fill: #8d959e;
      }

      > span {
        margin-left: var(--tv-CalendarView-schedule-span-margin-left);
        color: #8d959e;
      }
    }
  }
}

.@{calendar-view-prefix-cls}-tooltip {
  .inject-CalendarView-vars();
  position: absolute;
  max-width: 320px;

  .tooltip-main {
    overflow: auto;
    max-height: 80vh;
    padding: var(--tv-CalendarView-tooltip-title-font-size);

    .title {
      font-size: var(--tv-CalendarView-tooltip-title-font-size);
      font-weight: var(--tv-CalendarView-tooltip-title-font-weight);
    }

    .date {
      margin: 6px 0;
      color: var(--tv-CalendarView-tooltip-date-text-color);
    }
  }
}
